import { Table, Button, Row, Col, Input, Modal, Space } from 'antd';
import React, { useState } from 'react';
import Notes from './note';
import {
    PlusOutlined,
    InfoCircleOutlined,
    DeleteOutlined,
    EditOutlined,
    SearchOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
const { confirm } = Modal;
// 删除菜单事件
const showDeleteConfirm = () => {
    confirm({
        title: '确认删除吗',
        icon: <ExclamationCircleOutlined />,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {

            console.log('删除',);
        },
        onCancel() {
            console.log('取消');
        },
    });
};
// 修改事件
const showModal = () => {
    confirm({
        width:'1200px',
        title: '您正在修改此便签',
        icon: <ExclamationCircleOutlined />,
        content: <Notes />,
        okText: '确定',
        okType: 'default',
        cancelText: '取消',
        onOk() {
            console.log('删除');
            
        },

        onCancel() {
            console.log('取消');
        },
    });
}
const columns = [
    {
        title: '便签标题',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '便签描述',
        dataIndex: 'dec',
        key: 'dec',
    },
    {
        title: '便签内容',
        dataIndex: 'content',
        key: 'content',
    },
    {
        title: '创建者',
        dataIndex: 'builder',
        key: 'builder',
    },
    {
        title: '创建时间',
        dataIndex: 'buildTime',
        key: 'buildTime',
    },
    {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <Button type="text" style={{ color: "#1890FF" }} onClick={() => { showModal() }}>
                    修改
                </Button>
                <Button type="text" danger onClick={() => { showDeleteConfirm(record.key) }}>
                    删除
                </Button>
            </Space>
        ),
    },
];

const data = [
    {
        key: '1',
        title: '这是便签名称',
        dec: '这是便签描述',
        content: '这是内容',
        builder: '这是创建者',
        buildTime: '这是创建时间',
    },
    {
        key: '2',
        title: '这是便签名称',
        dec: '这是便签描述',
        content: '这是内容',
        builder: '这是创建者',
        buildTime: '这是创建时间',
    },
    {
        key: '3',
        title: '这是便签名称',
        dec: '这是便签描述',
        content: '这是内容',
        builder: '这是创建者',
        buildTime: '这是创建时间',
    },
];
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
};
const Note = () => {
    const [top, setTop] = useState('none');
    const [bottom, setBottom] = useState('bottomCenter');
    const [visible, setVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState(<Notes />);

    const showNotes = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setVisible(false);
            setConfirmLoading(false);
        }, 1000);
    };
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    };
    return (
        <>
            <div className="Menu">
                <div className='search'>
                    <div style={{ display: 'flex' }}>
                        <Col flex={24}>
                            <Button type="primary" shape="round" icon={<PlusOutlined />} onClick={showNotes}>
                                添加便签
                            </Button>
                        </Col>
                        <Col >
                            <Input placeholder="请输入便签名称" style={{ width: "250px", marginRight: "20px" }} />
                            <Button type="primary" icon={<SearchOutlined />}>
                                查询
                            </Button>
                        </Col>
                    </div>
                </div>
                <div className='list'>
                    <Table
                        rowSelection={{
                            ...rowSelection,
                        }}
                        columns={columns}
                        pagination={{
                            position: [top, bottom],
                        }}
                        dataSource={data}
                    />

                </div>
            </div>
            <Modal
                title="您正在添加便签"
                visible={visible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                width={1000}
            >
                <div>{modalText}</div>
            </Modal>
        </>

    );
};

export default Note;

